@import './variables.less';

.border-bottom-1px(@color: @border-color-base, @left: 0) {
  position: relative;
  &:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    left: @left;
    bottom: 0;
    height: 1px;
    background-color: @color;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    pointer-events: none;
  }
}

.border-top-1px(@color: @border-color-base, @left: 0) {
  position: relative;
  &:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    left: @left;
    top: 0;
    height: 1px;
    background-color: @color;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    pointer-events: none;
  }
}

.border-right-1px(@color: @border-color-base) {
  position: relative;
  &:after {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    left: 100%;
    top: 0;
    width: 1px;
    background-color: @color;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
    pointer-events: none;
  }
}
.border-left-1px(@color: @border-color-base) {
  position: relative;
  &:after {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    right: 100%;
    top: 0;
    width: 1px;
    background-color: @color;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
    pointer-events: none;
  }
}
//四边*/
.bd-all-1px(@color: @border-color-base, @radius: 3px) {
  position: relative;
  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border: 1px solid @color;
    border-radius: @radius;
  }
}

.bd-all(@color: @border-color-base, @radius: 3px,@width:1px,@borderStyle:solid) {
  position: relative;
  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border: @width @borderStyle @color;
    border-radius: @radius;
  }
}

.scale-hairline-common(@color, @top, @right, @bottom, @left) {
  content: '';
  position: absolute;
  background-color: @color;
  display: block;
  z-index: 1;
  top: @top;
  right: @right;
  bottom: @bottom;
  left: @left;
}

.hairline-bottom(@color: @border-color-base) {
  border-bottom: 1PX solid @color;

  html:not([data-scale]) & {
    @media (min-resolution: 2dppx) {
      border-bottom: none;

      &::after {
        .scale-hairline-common(@color, auto, auto, 0, 0);
        width: 100%;
        height: 1PX;
        transform-origin: 50% 100%;
        transform: scaleY(0.5);

        @media (min-resolution: 3dppx) {
          // transform: scaleY(0.33);
          transform: scaleY(0.5);
        }
      }
    }
  }
}

// Text overflow with(...)
// -------------------------
// Requires inline-block or block for proper styling
.text-overflow() {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}

.line-overflow(@line) {
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:@line; /* number of lines to show */
  -webkit-box-orient:vertical;
}

.common-pagination() {
  pointer-events: none;
  position: absolute;
  top: 0;
  display: block;
  width: 59 * @hd;
  height: 100%;
  content: ' ';
  //z-index: $tabs-pagination-zindex;
}
